import React, { Component} from 'react';
import '../../styles/Indexs/Home.scss'
import Swipe from '../../components/Swipe';
import  * as service from '../../api/index'
import { SearchOutline } from 'antd-mobile-icons'
import hg from '../../assets/hg.png'
import { PullToRefresh} from 'antd-mobile'
import { InfiniteScroll } from 'antd-mobile'


class Home extends Component {
  
     constructor(props){
        super(props)
        this.state={
            navlist:[
            {text:'嗨购超市',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png'},
            {text:'数码电器',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png'},
            {text:'嗨购服饰',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png'},
            {text:'嗨购生鲜',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png'},
            {text:'嗨购到家',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png'},
            {text:'充值缴费',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png'},
            {text:'9.9元拼' ,pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png'},
            {text:'领券'    ,pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png'},
            {text:'领金贴',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png'},
            {text:'plus会员',pic:'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png'},
            ],
            seckkilllist:[],
            prolist:[],
            cityname:localStorage.getItem('cityname'),
            hour:2,minutes:0,seconds:0
        }
    }
    async componentDidMount(){//挂载期间发送请求
      var res = await service.pro_seckilllist({ count:1,limitNum:24})
      this.setState({seckkilllist:res.data.data})
      var res2 = await service.pro_list({ count:1,limitNum:66})
      //倒计时功能
      this.setState({prolist:res2.data.data})
      this.timerid = setInterval(()=>{
        //秒数减1
        this.state.seconds = this.state.seconds - 1;
        
        if( this.state.seconds < 0 ){
            //如果秒数小于0,秒数设置为59,分钟减1
            this.state.seconds = 59;
            this.state.minutes = this.state.minutes-1;
            
            if( this.state.minutes < 0 ){
                //如果分钟小于0,分钟设置为59,小时减1
                this.state.minutes = 59;
                this.state.hour = this.state.hour-1;

                if( this.state.hour == -1 ){
                    clearInterval( this.timerid )
                }
            }
        }

        //每隔1s更新一次组件的状态值,触发组件更新
        this.setState({ hour: this.state.hour, minutes: this.state.minutes, seconds: this.state.seconds })
    },1000)
    }
    goLogin(){//去登录页面
        this.props.history.push('/login')
    }
    addZero(num){
        return num < 10 ? ('0' + num) : num;
    }
    sortcity(){//去选择城市页面
        this.props.history.push('/sortcity')
    }
    godetail(proid){//去详情页面
        this.props.history.push({pathname:'/detail',state:{id:proid}})
    }
    gosearch(){
        this.props.history.push('/search')
    }
    async shuaxin(){
        var res2 = await service.pro_list({ count:Math.floor(Math.random()*6+1),limitNum:24} )//随机推荐列表
        this.setState({prolist:res2.data.data})
    }
    render() {
        return (
            <div className='home' >       
                 <header>
                    <div className='left' onClick={()=>{this.sortcity()}}  > {this.state.cityname ? this.state.cityname : '西安' } </div>
                    <div className='middle' >
                        <div className="searchbox" onClick={()=>{this.gosearch()}} >
                          <div className="img">
                              <img src={hg} alt="" />
                          </div>
                          <span></span>
                          <span><SearchOutline /></span>
                          <p>立柜式空调</p>
                        </div>
                    </div>
                    <div className='right' onClick={()=>{ this.goLogin()}}  >{localStorage.getItem('token')? '我的':'登录'}</div>
                 </header>
                 <PullToRefresh  onRefresh={()=>{this.shuaxin()}}  pullingText='松开刷新'  threshold='120'   refreshingText=''  completeText='刷新成功'>
                <div className="banner">
                    <Swipe/>
                </div>
                <div className="nav">
                    {
                        this.state.navlist.map((item,index)=>{
                         return(
                            <div className="item"  key={index}>
                            <div className="img">
                                <img src={item.pic} alt="" />
                            </div>
                            <span>{item.text}</span>
                        </div>
                         )
                        })
                    }
                </div>
                <div className="seckillBox">
                    <div className="title">
                        <div className="left">
                            <p>嗨购秒杀</p>
                            <p>18点场</p>
                            <p className='time' >
                                <span className='num'>{this.addZero(this.state.hour)}</span>
                                <span className='num'>{this.addZero(this.state.minutes)}</span>
                                <span className='num'>{this.addZero(this.state.seconds)}</span>
                            </p>
                        </div>
                       <span>爆款轮番秒</span> 
                    </div>
                    <div className="seckillList">
                        {
                            this.state.seckkilllist.map((item,index)=>{
                                return(
                                    <div className="item" key={index}   onClick={()=>{this.godetail(item.proid)}}>
                                        <div className="img">
                                            <img src={item.img1} alt="" />
                                        </div>
                                        <div className="price">
                                            ￥{item.originprice}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="prolist">
                  {
                    this.state.prolist.map((item,index)=>{
                        return(
                            <div className="item" key={index}  onClick={()=>{this.godetail(item.proid)}} >
                                <div className="img">
                                    <img src={item.img1} alt="" />
                                </div>
                               <div className="text">
                                <p>{item.proname}</p>
                                <span>￥{item.originprice}</span>
                               </div>
                            </div>
                        )
                    })
                  }
                </div>
                </PullToRefresh>
                
            </div>
        );
    } }


export default Home;